---
title: Flickering Grid
date: 2024-08-15
description: A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
author: nyxb
published: true
---

<ComponentPreview 
name="flickering-grid-demo"
description="A flickering grid background made with SVGs, fully customizable using Tailwind CSS."
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyx@latest add flickering-grid
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="flickering-grid" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Rounded

<ComponentPreview name="flickering-grid-rounded-demo" />

## Props

| Prop            | Type     | Default          | Description                           |
| --------------- | -------- | ---------------- | ------------------------------------- |
| `squareSize`    | `number` | `4`              | Size of each square in the grid       |
| `gridGap`       | `number` | `6`              | Gap between squares in the grid       |
| `flickerChance` | `number` | `0.3`            | Probability of a square flickering    |
| `color`         | `string` | `"rgb(0, 0, 0)"` | Color of the squares                  |
| `width`         | `number` | `-`              | Width of the canvas                   |
| `height`        | `number` | `-`              | Height of the canvas                  |
| `className`     | `string` | `-`              | Additional CSS classes for the canvas |
| `maxOpacity`    | `number` | `0.2`            | Maximum opacity of the squares        |
